<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐网站</title>
    <!-- 引入Bootstrap的css样式 -->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <style>
        .banner {
            background: url("./img/bg.jpg");
            background-size: 50%;
            height: 200px;
        }

        .col-md-8,
        .col-md-2,
        .col-md-6 {
            outline: 1px solid #999;
        }

        .col-md-2 {
            background: #ebbbaf;
            text-align: center;
            height: 280px;
        }

        .col-md-2 a {
            color: blue;
            font-weight: bold;
            text-shadow: none;
            display: block;
        }

        .col-md-6 {
            background: #e9e9bc;
            height: 280px;
            text-align: center;
            line-height: 280px;
        }

        .bottom {
            height: 100px;
            background: #999999;
            text-align: center;
            line-height: 50px;

        }
        .col-xs-12 {
            text-align: center;
            text-shadow: none;
            padding:0;
            height:50px;
        }
</style>

    <!-- 引入jQuery -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">

        <div class="row">
            <div class="col-md-8 col-md-offset-2 banner"></div>
        </div>
        <div class="row visible-xs">
            <div class="col-xs-4"><a href="">首页</a></div>
            <div class="col-xs-4"><a href="">古典音乐</a></div>
            <div class="col-xs-4"><a href="">现代流行</a></div>
            <div class="col-xs-4"><a href="">爵士音乐</a></div>
            <div class="col-xs-4"><a href="">70后音乐</a></div>
            <div class="col-xs-4"><a href="">80后音乐</a></div>
            <div class="col-xs-4"><a href="">90后音乐</a></div>
        </div>
        <div class="row">
            <div class="col-md-2 col-md-offset-2">
                <a href="">首页</a><br />
                <a href="">古典音乐</a><br />
                <a href="">现代流行</a><br />
                <a href="">爵士音乐</a><br />
                <a href="">70后音乐</a><br />
                <a href="">80后音乐</a><br />
                <a href="">90后音乐</a>
            </div>
            <div class="col-sm-6 col-xs-12">
                这里是内容
            </div>
        </div>

        <div class="row">
            <div class="col-md-8 col-md-offset-2 bottom">
                <a href="" style="color: rgb(16, 16, 17);">|联系我们|</a>
                <a href="" style="color: rgb(16, 16, 17);">|关于我们|</a><br />

                感谢您的支持，希望明天会更好！！

            </div>
        </div>
    </div>
</body>

</html>